<template>
        <!-- 小说阅读页面 -->
    <div>
        <!-- 控制面板头部 -->
        <div class="head" v-show="showControl">
            <van-icon 
                name="arrow-left" 
                color='#fff' 
                size='24' 
                @click="goback"/>
            <van-icon 
                name="wap-nav" 
                color='#fff' 
                size='24' 
                @click="showMenu"/>
            <div class="menu" v-show="showMenuu">
                <div class="item" @click="goOther(1)">
                        <van-icon name="wap-home" />
                        首页
                </div>
                <div class="BookList item">
                    <van-icon name="label" />
                    <van-cell is-link @click="ShowAdPopup">
                        书架
                    </van-cell>
                </div>
                <div class="item" @click="goOther(2)">
                    <van-icon name="description" />
                    详情
                </div>
            </div>
        </div>
        <!-- 底部下载App弹出层 -->
        <BottomPop :ShowPop='ShowBottomPop' @ChangeShowPop='ShowAdPopup'></BottomPop>
        <!-- 控制面板底部 -->
        <div class="foot" v-show="showControl">
            <div class="size">
                <button 
                    @click="fontOnChange(1)" 
                    :disabled='leftisclick'
                    :style="{color:FontSizeIndex==0?'#ccc':'#fff'}">Aa-</button>
                <van-slider 
                    v-model="FontSizeIndex"
                    @change="slideChange"
                    :min="0" 
                    :max="4"/>
                <button 
                    @click="fontOnChange(2)" 
                    :disabled='rightisclick'
                    :style="{color:FontSizeIndex==4?'#ccc':'#fff'}">Aa+</button>
            </div>
            <div class="color">
                <span 
                    @click="changeColor(j)" 
                    :style="styleactive==j?btnstyleObj:''"
                    v-for="(i,j) in btnList"
                    :key="j">
                        {{i}}
                </span>
            </div>
        </div>
        <!-- 内容区域 -->
        <div 
            class="content" 
            @click="showControlboard"
            :style="styleObj"
            v-html="content">
            
        </div>
        <!-- 底部三个按钮 -->
        <div class="bottomBtn">
            <span @click="changeChapter(0)">上一章</span>
            <span>
                <van-cell 
                    is-link 
                    @click="CatalogshowPop">
                    目录
                </van-cell>
                <van-popup 
                    v-model="showCatalog"
                    position="left"
                    :style="{ width:'80%',height:'100%'}">
                    <h3>{{BookDetail.title}}</h3>
                    <p>目录</p>
                    <div 
                        class="item" 
                        v-for="(i,j) in chapterList"
                        :key="j"
                        @click="goBooKRead(i.label)">
                            {{i.title}}
                    <!-- <div
                        class="mask" 
                        v-if="j>2999"
                        @click="ShowAdPopup"
                        @click.stop>
                            <van-icon name="cart-o" size='24'/>
                    </div> -->
                    </div>
                </van-popup>
            </span>
            <span @click="changeChapter(1)">下一章</span>
        </div>
    </div>
</template>
<script>
import BottomPop from '@/components/BottomPop.vue'
export default {
    name:'BookRead',
    components:{
        BottomPop
    },
    data(){
        return {
            // 显示控制面板
            showControl:false,
            //左侧弹出目录
            showCatalog: false,
            //顶部右侧菜单按钮
            showMenuu:false,
            //书架弹出层
            ShowBottomPop:false,
            //底部滑块控制字体大小及左右按钮
            FontSizeIndex:1,
            leftisclick:false,
            rightisclick:false,
            //底部样式选择块活跃样式及内容部分样式
            styleactive:0,
            btnstyleObj:{
                borderColor:'#a6483c',
                color:'#a6483c'
            },
            //内容样式 默认 夜间 护眼
            styleObj:{
                backgroundColor:'rgb(221, 210, 188)',
                color:'#000',
                fontSize:'.28rem'
            },
            // styleList:[
            //     ['rgb(221, 210, 188)','#000'],
            //     ['#000','#ccc'],
            //     ['rgb(225, 241, 218)','rgb(34, 34, 34)'],
            //     ['.24rem','.28rem','.32rem','.36rem','.40rem']
            // ],
            styleList:{
                backgroundColor:['rgb(221, 210, 188)','#000','rgb(225, 241, 218)'],
                fontColor:['#000','#ccc','rgb(34, 34, 34)'],
                fontSize:['.24rem','.28rem','.32rem','.36rem','.40rem']
            },
            btnList:['默认','夜间','护眼'],
            // 书籍id
            id:0,
            // 章节目录
            chapterList:[],
            label:0,
            // 文本内容
            content:'',
            canRequire:true,
            BookDetail:[],
            //个人记录
            personalRecord:{
                book:[
                    {id:-1,label:0},
                    {id:-1,label:0},
                    {id:-1,label:0}
                ],
                fontSizeIndex:1,
                style:0
            },
        }
    },
    created(){
        this.id=this.$route.params.id
        this.label=this.$route.params.label
        this.$api.Preflight().then(res=>{
                this.getDetail()
                this.getChapter()
            }).catch((()=>{
                console.log('请求出错')
        }))
    },
    mounted(){
        let a=localStorage.getItem('personalRecord')
        if(a!=null){
            this.personalRecord=JSON.parse(a)
            // 字体赋值
            this.FontSizeIndex=this.personalRecord.fontSizeIndex
            this.styleObj.fontSize=this.styleList.fontSize[this.FontSizeIndex]
            // 样式赋值
            this.styleactive=this.personalRecord.style
            this.styleObj.backgroundColor=this.styleList.backgroundColor[this.styleactive]
            this.styleObj.color=this.styleList.fontColor[this.styleactive]
            //章节赋值
            this.personalRecord.book.forEach(i=>{
                if(i.id==this.id){
                    this.label=i.label
                }
            })
            
        }
    },
    methods:{
        //点击内容区域显示控制面板
        showControlboard(){
            this.showControl=!this.showControl
            this.showMenuu=false
        },
        //顶部左侧返回返回按钮
        goback(){
            this.$router.go(-1)
        },
        //顶部右侧菜单按钮
        showMenu(){
            this.showMenuu=!this.showMenuu
        },
        // 路由跳转主页和书籍详情页
        goOther(v){
            let router=v==1?'Home':'BookDetails'
            this.$router.push({name:router})
        },
        // 底部弹出下载App
        ShowAdPopup(){
            this.ShowBottomPop=!this.ShowBottomPop
        },
        //底部字体控制
        fontOnChange(v){
            if(v==1){
                this.FontSizeIndex--
            }else{
                this.FontSizeIndex++
            }
            this.slideChange()
        },
        // 滑块改变时触发
        slideChange(){
            this.styleObj.fontSize=this.styleList.fontSize[this.FontSizeIndex]
            if(this.FontSizeIndex==0){
                this.leftisclick=true
            }else if(this.FontSizeIndex==4){
                this.rightisclick=true
            }else{
                this.leftisclick=false
                this.rightisclick=false
            }
            this.personalRecord.fontSizeIndex=this.FontSizeIndex
            this.LocalStorage()
        },
        //底部样式选择块活跃状态控制
        changeColor(v){
            this.styleactive=v
            this.styleObj.backgroundColor=this.styleList.backgroundColor[v]
            this.styleObj.color=this.styleList.fontColor[v]
            this.personalRecord.style=v
            this.LocalStorage()
        },
        //底部控制左侧目录
        CatalogshowPop() {
            this.showCatalog = !this.showCatalog
        },
        // 接口调用       
        // 获取章节目录
        getChapter(){
            let params={
                id:this.id
            }
            this.$api.getChapter(params).then(res=>{
                if(res.errorno == 200){
                    this.chapterList=res.data
                    // console.log(this.chapterList)
                    this.Checking()
                }
            }).catch(()=>{console.log('网络错误')})
        },
        // 获取书籍详情
        getDetail(){
            let params={
                id:this.id
            }
            this.$api.getDetail(params).then(res=>{
                if(res.errorno == 200){
                    this.BookDetail=res.data.detail
                }
            }).catch()
        },
        //验证
        Checking(){
            this.$api.Preflight().then(res=>{
                this.getContent()
            }).catch((()=>{
                console.log('请求出错')
            }))
        },
        // 获取文本内容
        getContent(){
            let params={
                id:this.id,
                label:this.label
            }
            this.$api.getContent(params).then(res=>{
                let url=res.data.url
                let head=url.split('/')[2]
                let body=url.split(head)[1]
                this.$api.getTexts(head,body).then(data=>{
                    let chapterTitle='<h3>'+this.chapterList[this.label].title+'</h3>'
                    this.content=chapterTitle+'<p>'+data.replace(/\n/g,'</p><p>')+'</p>'
                    this.canRequire=true
                    window.scrollTo(0, 0)
                    // 存储
                    if(this.personalRecord.book.some(i=>i.id==this.id)){
                        let a=this.personalRecord.book.findIndex(i=>i.id==this.id)
                        this.personalRecord.book[a].label=this.label
                    }else{
                        // let a=this.personalRecord.book[0]
                        // this.personalRecord.test=a
                        // this.personalRecord.book[2]=this.personalRecord.book[1]
                        // this.personalRecord.book[1]=a
                        // this.personalRecord.book[0].id=this.id
                        // this.personalRecord.book[0].label=this.label
                        this.personalRecord.book.shift()
                        let a={
                            id:this.id,
                            label:this.label
                        }
                        this.personalRecord.book.push(a)
                    }
                    this.LocalStorage()
                }).catch(()=>{
                    console.log('获取内容失败')
                })
            }).catch(()=>{
                console.log('error')
            })
        },
        // 上一章和下一章
        changeChapter(v){
            // console.log(Object.keys(this.chapterList),this.chapterList)
            if(this.canRequire){
                if(v==0){
                    if(this.label==0){
                        this.$toast('第一章')
                        return 
                    }else{
                        this.label--
                    }
                }else{
                    // console.log(this.chapterList)
                    if(this.label>=2999){
                        this.ShowAdPopup()
                        return
                    }
                    let a=Object.keys(this.chapterList)
                    let b=a[a.length-1]
                    if(this.label==this.chapterList[b].label){
                        this.$toast('最新章节')
                        return
                    }else{
                        this.label++
                    }
                }
                this.Checking()
            }else{
                this.$toast('过于频繁')
            }
            this.canRequire=false
        },
        // 点击目录跳转
        goBooKRead(v){
            this.label=v
            this.Checking()
            this.CatalogshowPop()
        },
        LocalStorage(){
            console.log('存储')
            localStorage.setItem('personalRecord',JSON.stringify(this.personalRecord))
        },
    }
}
</script>
<style lang="stylus" scoped>
.head
    background-color rgba(0,0,0,.7)
    height 1rem
    display flex
    width 100vw
    justify-content space-between
    align-items center
    padding 0 .2rem
    position fixed
    top 0
    box-sizing border-box
    >>> .van-icon
        height 50%
    .menu
        position absolute
        background-color rgba(0,0,0,.7)
        color #fff
        width 1.8rem
        height 1.6rem
        text-align center
        font-size .28rem
        right 0.34rem
        top 1.1rem
        &:before
            content ''
            position absolute
            top -.2rem
            right 0
            border .2rem solid transparent 
            border-top none
            border-bottom-color rgba(0,0,0,.6)
        .item
            height 32%
            line-height .6rem
            border-bottom .02rem solid #000
            display flex
            align-items center
            justify-content center
            .van-icon
                padding-right .1rem
        .BookList
            display flex
            justify-content center
            align-items center
            .van-cell 
                padding 0
                width .6rem
                height 100%
                background-color transparent
                >>> .van-cell__value--alone
                    text-align center
                    font-size .28rem
                    width 100%
                    height 100%
                    color #fff
                    line-height .5rem
                >>> i
                    display none
.foot
    position fixed
    bottom 0
    background-color rgba(0,0,0,.7)
    width 100vw
    height 3rem
    color #fff
    .size
        height 1rem
        font-size .34rem
        display flex
        justify-content space-around
        align-items center
        .van-slider
            width 60%
            >>> .van-slider__bar
                background-image linear-gradient(to right, #04BE02,#ff0)
    button
        background-color transparent
        border none
        position relative
    .color
        height 1rem
        display flex
        justify-content space-around
        font-size .28rem
        text-align center
        span
            width 2.2rem
            height .6rem
            line-height .6rem
            border 1px solid transparent
.bottomBtn
    position fixed
    width 100%
    text-align center
    bottom .3rem
    display flex
    justify-content space-around
    font-size .34rem
    color #fff
    span
        border-radius .3rem
        padding 0.05rem .2rem 
        width 1.2rem
        height .5rem
        background-color #ff4500
        .van-cell
            line-height .68rem
            font-size .34rem
            background-color transparent
            padding 0
            display inline-block
            height 100%
            >>> .van-cell__value--alone
                width 100%
                color #fff
                text-align center
                position absolute
                top -.08rem
            >>> .van-icon
                display none
            &:after
                width 0
        .van-popup
            color #000
            text-align left 
            padding .8rem 0 0 .2rem
            h3
                font-size .36rem
                line-height .72rem
            p
                font-size .32rem
                line-height .64rem
                border-bottom .02rem solid #000
            .item:last-child
                padding-bottom .2rem
            .item
                font-size .28rem
                height 1rem
                line-height 1rem
                border-bottom 1px solid #ccc
                position relative
                .mask
                    position absolute
                    top 0
                    left 0
                    width 100%
                    height 100%
                    .van-icon
                        position absolute
                        right .4rem
                        top .2rem
.content
    padding .2rem .2rem 2rem .2rem
    line-height 2em
    min-height 100vh
    text-align justify
    >>> p
        text-indent 2em
        padding-bottom .2em
</style>